<template>
	<view class="page_body">
		<!-- 导航栏 -->
		 <u-navbar title="创建话题" :autoBack="true" ></u-navbar>

		 <view style="height: 58px;"></view>

		<view class="cover_box">
			<view class="cover_son_box" @click="selectCover">
				<image v-if="topicForm.coverUrl" class="cover" mode="aspectFill" :src="topicForm.coverUrl"></image>
				<image v-else class="cover_upload_icon" src="/static/icon/upload.png"></image>
				<text  v-if="!topicForm.coverUrl" class="cover_placeholder">添加头像</text>
			</view>
		</view>

		<u--form :model="topicForm" :rules="rules" labelPosition="top" ref="baseForm"
			:borderBottom="false" labelWidth="120" style="margin: 10px 20px;">
			<u-form-item label="话题名称" prop="name"   required>
				<u--input v-model="topicForm.name" placeholder="给话题起个名称吧" border="surround" ></u--input>
			</u-form-item>

			<u-form-item label="成员称号" prop="memberNickname"  required>
				<u--input v-model="topicForm.memberNickname" placeholder="给成员起个称号吧" border="surround" ></u--input>
			</u-form-item>

			<u-form-item label="话题描述" prop="description"  required>
				<u--textarea v-model="topicForm.description" placeholder="简单介绍一下你的话题吧(200字以内)" count  height="140" maxlength="200"></u--textarea>
			</u-form-item>
		</u--form>



		<view style="margin-top: 30px;margin-left: 15px;margin-right: 15px;">
			<u-button shape='circle' type="primary" text="创建" color="#06a8ff" :disabled="submiting" @click="checkForm()"></u-button>
		</view>


		<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
import {toUpload,getFileMD5} from '@/util/fileUtil.js';
	export default {
		data() {
			return {
				// 提交中
				submiting: false,
				// 表单
				topicForm:{
					// 名称
					name: '',
					// 封面
					cover: '',
					coverUrl: '',
					// 描述
					description: '',
					// 成员昵称
					memberNickname: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写话题名称',
						trigger: ['blur']
					},
					'memberNickname': {
						type: 'string',
						required: true,
						message: '请填写成员昵称',
						trigger: ['blur']
					},
					'description': {
						type: 'string',
						required: true,
						message: '请填写话题描述',
						trigger: ['blur']
					},

				},
				// 封面图片文件
				coverFile: null,
			}
		},
		onLoad() {
			if(!this.$authUtil.isLoginedin(true)){
				uni.navigateBack()
			}
		},
		methods: {

			// 选择图片
			selectCover(e) {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: async function(res) {
						res.tempFiles[0].MD5 = await getFileMD5(res.tempFiles[0])
						that.topicForm.coverUrl = res.tempFilePaths[0];
						that.coverFile = res.tempFiles[0];
					}
				});
			},
			// 检查表单
			async checkForm(){
				if (this.submiting){
					return
				}
				this.submiting = true;
				if(!this.topicForm.coverUrl){
					uni.$u.toast('请添加头像')
					this.submiting = false;
					return false
				}
				this.$refs.baseForm.validate().then(async res => {
					const tag = /(blob:.*)/g
					if (this.topicForm.coverUrl.match(tag)){
						await this.uploadFile()
					}
					this.submitForm()
				}).catch(errors => {
					this.submiting = false;
				})
			},
			// 上传文件
			async uploadFile(){
				if (!this.coverFile){
					return
				}
				uni.showLoading({
					title: '上传中'
				});
				await toUpload(this.coverFile).then(({data})=>{
					uni.hideLoading()
					if (data.code == "000000") {
						this.topicForm.cover = data.data.id
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 提交表单
			submitForm(){
				this.submiting = false;
				let form = {
					name: this.topicForm.name,
					cover:this.topicForm.cover,
					description: this.topicForm.description,
					memberNickname: this.topicForm.memberNickname,
				}
				this.$httpApi.baseArticlePost('user/topic/save',form).then(({data}) => {
					if (data.code == "000000") {
						this.$refs.uToast.show({
							type: 'success',
							message: '创建成功'
						})
						uni.navigateBack()
					} else {
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
					this.submiting = false;
				}).catch(err => {
					this.submiting = false;
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.cover_box {
		display: flex;
		flex-direction: row;
		flex: 1;
		justify-content: center;
		margin: 10px 0 20px;
	}

	.cover_son_box {
		display: flex;
		width: 105px;
		height: 105px;
		background-color: #f4f4f4;
		border-radius: 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.cover{
		border-radius: 10px;
		width: 105px;
		height: 105px;
	}

	.cover_upload_icon {
		width: 65px;
		height: 65px;
	}
	.cover_placeholder{
		font-size: 12px;
		line-height: 15px;
		color: #777;
		text-align: center;
		padding: 5px 0;
		font-weight: 500;
	}


</style>
